<template>
    <div :class="{ sticky: isSticky }">
        <van-tabs v-model="active" @click="onClick" line-width="60" line-height="2" title-active-color="#ff5f16" title-inactive-color="#191a1b">
            <van-tab title="正在热映"></van-tab>
            <van-tab title="即将上映"></van-tab>
        </van-tabs>
    </div>
</template>

<script>
// 1. 引入vant的tab和tabs组件
import Vue from "vue";
import { Tab, Tabs } from "vant";
Vue.use(Tab);
Vue.use(Tabs);

export default {
    data: function() {
        return {
            // 默认tab索引
            active: 0,
            // 数组地址
            url: ["/films/nowPlaying", "/films/comingSoon"],
            // 是否具备吸顶效果
            isSticky: false,
        };
    },
    methods: {
        /**
         * index：索引
         * title：tab的名称（文字内容）
         */
        onClick(index, title) {
            // 编程式导航
            this.$router.push(this.url[index]);
        },
    },
    // 在生命周期中解决刷新导致active归零的情况
    created() {
        this.active = this.url.indexOf(this.$route.path);
    },
    // mounted周期中获取滚动条高度
    mounted() {
        // 监听滚动条的滚动事件
        addEventListener("scroll", () => {
            // 获取滚动条距离顶部的高度
            let scrollTop = document.documentElement.scrollTop;
            if (scrollTop >= 300) {
                // 具备吸顶效果
                this.isSticky = true;
            } else {
                // 不具备吸顶效果
                this.isSticky = false;
            }
        });
    },
};
</script>

<style scoped>
/* 吸顶样式 */
.sticky {
    position: fixed;
    z-index: 999;
    width: 100%;
}
</style>
